<!--
  提现详情组件
  @description 查看提现申请的详细信息
  @author AI Assistant
  @since 1.0.0
-->
<template>
  <Dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="800px"
    :scroll="true"
    max-height="600px"
  >
    <div v-loading="loading">
      <!-- 提现基本信息 -->
      <el-card class="mb-20px">
        <template #header>
          <div class="card-header">
            <span>{{ t('settle.withdraw.basicInfo') }}</span>
          </div>
        </template>
        <el-descriptions :column="2" border v-if="withdrawData">
          <el-descriptions-item :label="t('settle.withdraw.withdrawNo')">
            {{ withdrawData.withdrawNo }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.withdraw.merchantNo')">
            {{ withdrawData.merchantNo }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.withdraw.merchantName')">
            {{ withdrawData.merchantName }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.withdraw.withdrawStatus')">
            <el-tag :type="getWithdrawStatusTagType(withdrawData.withdrawStatus)">
              {{ withdrawStatusOptions[withdrawData.withdrawStatus] }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.withdraw.withdrawAmount')">
            <span class="amount-text">¥{{ (withdrawData.withdrawAmount / 100).toFixed(2) }}</span>
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.withdraw.feeAmount')">
            <span class="fee-text">¥{{ (withdrawData.feeAmount / 100).toFixed(2) }}</span>
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.withdraw.actualAmount')">
            <span class="actual-text">¥{{ (withdrawData.actualAmount / 100).toFixed(2) }}</span>
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.withdraw.feeRate')">
            {{ withdrawData.feeRate }}%
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.withdraw.applyTime')">
            {{ formatDate(withdrawData.applyTime) }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.withdraw.expectedTime')">
            {{ formatDate(withdrawData.expectedTime) }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 银行信息 -->
      <el-card class="mb-20px">
        <template #header>
          <div class="card-header">
            <span>{{ t('settle.withdraw.bankInfo') }}</span>
          </div>
        </template>
        <el-descriptions :column="2" border v-if="withdrawData">
          <el-descriptions-item :label="t('settle.withdraw.bankName')">
            {{ withdrawData.bankName }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.withdraw.bankCode')">
            {{ withdrawData.bankCode }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.withdraw.bankAccount')">
            {{ withdrawData.bankAccount }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.withdraw.accountName')">
            {{ withdrawData.accountName }}
          </el-descriptions-item>
          <el-descriptions-item
            :label="t('settle.withdraw.bankBranch')"
            :span="2"
            v-if="withdrawData.bankBranch"
          >
            {{ withdrawData.bankBranch }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 审核信息 -->
      <el-card class="mb-20px" v-if="withdrawData?.auditTime">
        <template #header>
          <div class="card-header">
            <span>{{ t('settle.withdraw.auditInfo') }}</span>
          </div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item :label="t('settle.withdraw.auditResult')">
            <el-tag :type="getWithdrawStatusTagType(withdrawData.withdrawStatus)">
              {{ withdrawStatusOptions[withdrawData.withdrawStatus] }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.withdraw.auditTime')">
            {{ formatDate(withdrawData.auditTime) }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.withdraw.auditor')">
            {{ withdrawData.auditor || '-' }}
          </el-descriptions-item>
          <el-descriptions-item
            :label="t('settle.withdraw.auditRemark')"
            :span="2"
            v-if="withdrawData.auditRemark"
          >
            {{ withdrawData.auditRemark }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 处理信息 -->
      <el-card v-if="withdrawData?.processTime">
        <template #header>
          <div class="card-header">
            <span>{{ t('settle.withdraw.processInfo') }}</span>
          </div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item :label="t('settle.withdraw.processTime')">
            {{ formatDate(withdrawData.processTime) }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.withdraw.channelOrderNo')">
            {{ withdrawData.channelOrderNo || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.withdraw.processResult')">
            <el-tag :type="getWithdrawStatusTagType(withdrawData.withdrawStatus)">
              {{ withdrawStatusOptions[withdrawData.withdrawStatus] }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item
            :label="t('settle.withdraw.failReason')"
            v-if="withdrawData.failReason"
          >
            {{ withdrawData.failReason }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 申请备注 -->
      <el-card v-if="withdrawData?.remark">
        <template #header>
          <div class="card-header">
            <span>{{ t('settle.withdraw.applyRemark') }}</span>
          </div>
        </template>
        <div class="remark-content">
          {{ withdrawData.remark }}
        </div>
      </el-card>
    </div>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { formatDate } from '@/utils/formatTime'
import { getWithdrawApplyApi } from '@/api/settle/withdraw'
import type { WithdrawVO } from '@/api/settle/types'
import { WithdrawStatusEnum } from '@/api/settle/types'
import { Dialog } from '@/components/Dialog'

defineOptions({ name: 'WithdrawDetail' })

const { t } = useI18n()

// 弹窗相关
const dialogVisible = ref(false)
const dialogTitle = ref('')
const loading = ref(false)

// 提现数据
const withdrawData = ref<WithdrawVO>()

// 选项数据
const withdrawStatusOptions = {
  [WithdrawStatusEnum.PENDING]: t('settle.withdraw.withdrawStatuses.pending'),
  [WithdrawStatusEnum.APPROVED]: t('settle.withdraw.withdrawStatuses.approved'),
  [WithdrawStatusEnum.REJECTED]: t('settle.withdraw.withdrawStatuses.rejected'),
  [WithdrawStatusEnum.PROCESSING]: t('settle.withdraw.withdrawStatuses.processing'),
  [WithdrawStatusEnum.SUCCESS]: t('settle.withdraw.withdrawStatuses.success'),
  [WithdrawStatusEnum.FAILED]: t('settle.withdraw.withdrawStatuses.failed')
}

/**
 * 打开对话框
 */
const open = async (withdraw: WithdrawVO) => {
  dialogVisible.value = true
  dialogTitle.value = t('settle.withdraw.detail') + ' - ' + withdraw.withdrawNo
  loading.value = true

  try {
    // 获取提现详情
    const data = await getWithdrawApplyApi(withdraw.id)
    withdrawData.value = data
  } catch (error) {
    console.error('获取提现详情失败:', error)
  } finally {
    loading.value = false
  }
}

// 标签类型获取函数
const getWithdrawStatusTagType = (status: number) => {
  const statusMap = {
    [WithdrawStatusEnum.PENDING]: 'warning',
    [WithdrawStatusEnum.APPROVED]: 'primary',
    [WithdrawStatusEnum.REJECTED]: 'danger',
    [WithdrawStatusEnum.PROCESSING]: 'info',
    [WithdrawStatusEnum.SUCCESS]: 'success',
    [WithdrawStatusEnum.FAILED]: 'danger'
  }
  return statusMap[status] || ''
}

// 暴露方法
defineExpose({ open })
</script>

<style scoped>
.mb-20px {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.amount-text {
  color: #409eff;
  font-weight: bold;
  font-size: 16px;
}

.fee-text {
  color: #e6a23c;
  font-weight: bold;
}

.actual-text {
  color: #67c23a;
  font-weight: bold;
  font-size: 16px;
}

.remark-content {
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  line-height: 1.6;
  color: #606266;
}
</style>
